<template>
  <div class="pagination-wrap" :class="[float]">
    <i v-if="float === 'center' || float === 'right'"></i>
    <el-pagination
      :page-size="pageSize"
      :background="background"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
    <i v-if="float === 'center'"></i>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    float?: string
    total?: number
    pageSize?: number
    background?: boolean
  }>(),
  {
    float: 'right',
    pageSize: 10,
    total: 0,
    background: true,
  },
)
const $emit = defineEmits<{
  (e: 'update:pageNo', val: number)
}>()
const handleCurrentChange = (page: number) => {
  $emit('update:pageNo', page)
}
</script>

<style scoped lang="scss">
.pagination-wrap {
  display: flex;
  justify-content: space-between;

  .center {
    justify-content: center;
  }
}
</style>
